<template>
  <div class="box">
    <div class="hearder">
      <p>为您设置一张证件照吧</p>
    </div>
    <van-swipe class="my-swipe" :loop="false" indicator-color="blue">
      <van-swipe-item v-for="(item, index) in list.listimg" :key="index" @click="selectImage(item)"
        ><img :src="item.imagePic" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <el-upload
          class="avatar-uploader"
          action="http://wq.bwstudent.com:7999/health/doctor/verify/v1/uploadImagePic"
          :http-request="unload"
          :show-file-list="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </van-swipe-item>
    </van-swipe>

    <van-button type="primary" size="large" class="shebutton" @click="shezhi">完成设置</van-button>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { usecurrentStore } from '../../stores/my'
import router from '@/router'
import { showToast } from 'vant'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import tool from '../../utils/oss'

const imageUrl = ref('')
const list: any = usecurrentStore()
const selectedImage = ref(null)
const show = ref(false)

const selectImage = (image: any) => {
  selectedImage.value = image // 当用户选择图片时，保存选中的图片信息
  console.log(selectedImage.value, 'selectedImage.value')
}

const unload = async (option: any) => {
  try {
    const result: any = await tool.oss.upload(option.file)
    console.log(result, 'aadadadadad')

    imageUrl.value = result.url // 假设result.url是返回的上传后的文件URL
    showToast('上传成功')
  } catch (error) {
    showToast('上传失败')
    console.error(error)
  }
}
onMounted(async () => {
  try {
    await list.imgluist()
  } catch (error) {
    console.log(error, '设置失败')
  }
})
const shezhi = () => {
  const imagePic: any = selectedImage.value
  console.log(imagePic, 'aa')
  router.push({
    path: '/my',
    query: { imagePic: imagePic?.imagePic }
  })
}
// const tiaoImage = () => {
//   show.value = true
// }
</script>
<style scoped lang="scss">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .hearder {
    width: 100%;
    height: 3.5rem;
    p {
      margin-left: 1rem;
      float: left;
      font-size: 17px;
      font-weight: 700;
      color: rgb(90, 159, 238);
      line-height: 3.5rem;
    }
  }
  .my-swipe .van-swipe-item {
    width: auto;
    height: 10rem;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // border: 1px solid gray;
    border-radius: 20px;
    // background-color: #39a9ed;
    img {
      width: 93vw;
      height: 9.7rem;
      border-radius: 20px;
      margin-left: 0.1rem;
    }
  }
  .imgbox {
    width: 75vw;
    height: 10rem;
    border: 1px solid gray;
    border-radius: 20px;
    margin-left: 1.2rem;

    img {
      width: 73vw;
      border-radius: 20px;
      margin-left: 0.1rem;
    }
  }
  .shebutton {
    width: 90vw;
    border-radius: 20px;
    margin-top: 2rem;
    margin-left: 0.5rem;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
